<template>
  <view class="c-swiper-wrap">
    <swiper class="c-swiper" @change="onChange" autoplay :previous-margin="previousMargin">
      <template v-for="(item, i) in props.list">
        <swiper-item :key="i" v-if="!props.filter || props.filter(item)">
          <slot :item="item" :index="i"></slot>
        </swiper-item>
      </template>
    </swiper>
    <view class="indicator-box">
      <view class="indicator">
        <view class="indicator-item" v-for="(item, i) in props.list" :class="{ active: current == i }" :key="i"></view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { View, Swiper, SwiperItem } from '@tarojs/components';
import { ref } from 'vue';

const props = defineProps({
  filter: Function,
  previousMargin: String,
  list: {
    type: Array,
    default: () => []
  }
});

const current = ref(0);

const onChange = e => {
  current.value = e.detail.current;
};
</script>
<style lang="scss">
.c-swiper-wrap {
  position: relative;
  height: 750px;
  width: 750px;
  .c-swiper {
    height: 100%;
    width: 100%;
  }

  .indicator-box {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 3;
    .indicator {
      display: flex;
      padding: 10px 15px;
      border-radius: 20px;
      background-color: rgba($color: #000, $alpha: 0.3);
      .indicator-item {
        height: 10px;
        width: 10px;
        border-radius: 10px;
        margin: 0 5px;
        transition: all 0.3s;
        background-color: var(--color-caption);
      }
      .indicator-item.active {
        width: 30px;
      }
      .indicator .indicator-item:not(.active) {
        opacity: 0.8;
      }
    }
  }
}
</style>
